<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配置</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="./static/elementui.css">
</head>
<body>
    <div id="app">

        <el-row type="flex" justify="center">
            <el-col :span="3"></el-col>
            <el-col :span="18">
                <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item index="4" @click="changeTab(4)">核酸检验库（扫码）</el-menu-item>
                    <el-menu-item index="1" @click="changeTab(1)">核酸检验库（表格）</el-menu-item>
                    <el-menu-item index="2" @click="changeTab(2)">常住人口库</el-menu-item>
                    <el-menu-item index="3" @click="changeTab(3)">核酸/常住信息比对</el-menu-item>
                    <el-menu-item index="5" @click="changeTab(5)">配置</el-menu-item>
                </el-menu>

                <el-row type="flex" style="padding-top:10px;width: 100%;">
                    <el-form ref="form" :inline="true" :model="form" label-width="auto" style="width: 100%;">
                        <el-divider content-position="left">核酸检验库导入模板</el-divider>
                        <el-form-item label="表头所在行">
                            <el-input v-model="form.nat.start_row" style="width: 200px;"></el-input>
                        </el-form-item>
                        <br>

                        <el-form-item label="姓名">
                            <el-input v-model="form.nat.name" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="证件号码">
                            <el-input v-model="form.nat.card" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input v-model="form.nat.link" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="常住地址">
                            <el-input v-model="form.nat.addr" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="所属乡镇">
                            <el-input v-model="form.nat.town" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="编号">
                            <el-input v-model="form.nat.nums" style="width: 200px;"></el-input>
                        </el-form-item>

                        <el-divider content-position="left">常住人口库导入模板</el-divider>
                        <el-form-item label="表头所在行">
                            <el-input v-model="form.pop.start_row" style="width: 200px;"></el-input>
                        </el-form-item>
                        <br>

                        <el-form-item label="姓名">
                            <el-input v-model="form.pop.name" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="证件号码">
                            <el-input v-model="form.pop.card" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input v-model="form.pop.link" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="常住地址">
                            <el-input v-model="form.pop.addr" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="所属乡镇">
                            <el-input v-model="form.pop.town" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="编号">
                            <el-input v-model="form.pop.nums" style="width: 200px;"></el-input>
                        </el-form-item>

                        <br>
                        <el-form-item style="position: absolute;right:0;margin-top:40px">
                            <el-button type="primary" @click="onSubmit">保存</el-button>
                        </el-form-item>
                    </el-form>
                </el-row>
            </el-col>
            <el-col :span="3"></el-col>
        </el-row>
    </div>

    <!-- import Vue before Element -->
    <script src="./static/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="./static/elementui.js"></script>
    <!-- import axios -->
    <script src="./static/axios.min.js"></script>
    <!-- import cookie -->
    <script src="./static/js.cookie.min.js"></script>
    <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
                form: {
                    nat: {
                        start_row: '',
                        name: '',
                        card: '',
                        link: '',
                        addr: '',
                        town: '',
                        nums: ''
                    },
                    pop: {
                        start_row: '',
                        name: '',
                        card: '',
                        link: '',
                        addr: '',
                        town: '',
                        nums: ''
                    }
                },
                activeIndex2: '5',
                activeNames: ['1', '2']
            }
          },
          created() {
              if(Cookies.get('login') != 'true') {
                  window.location.href = './login.html'
              } else {
                  this.getSetting()
              }
          },
          methods: {
              changeTab(type) {
                  if(type == 2) {
                    window.location.href = "./pop.html"
                  }  else if(type == 4) {
                    window.location.href = "./code.html"
                  } else if(type == 3) {
                    window.location.href = "./compare.html"
                  } else if(type == 5) {
                    window.location.href = "./setting.html"
                  } else {
                    window.location.href = "./index.html"
                  }
              },
              getSetting() {
                axios.get('/get_setting').then((res) => {
                    console.log(res.data)
                    data = res.data
                    this.form = {
                        nat: data.nat,
                        pop: data.pop
                    }
                })
              },
              onSubmit() {
                  console.log(this.form)
                  axios.post('/save_setting', {
                      setting: this.form
                  }).then((res) => {
                    console.log(res)
                    data = res.data

                    if(data.code == 1) {
                        this.$message({message: '保存成功！', type: 'success'})
                    } else {
                        this.$message({message: '保存失败！', type: 'error'})
                    }
                })
              }
          }
        })
    </script>
</body>
</html>